<template>
  <scroll-view
    scroll-y
    class="recommend_view"
    v-if="recommends.length>0"
    @scrolltolower="handleToLower"
  >
    <!-- 推荐 -->
    <view class="recommend_wrap">
      <!-- 接口已挂，不进行跳转 -->
      <!-- <navigator
        :url="`/pages/album/index?id=${item.target}`"
        class="recommend_item"
        v-for="item in recommends"
        :key="item.id"
      >
        <image
          :src="item.thumb"
          mode="widthFix"
        ></image>
      </navigator> -->
      <view
        class="recommend_item"
        v-for="item in recommends"
        :key="item.id"
        @click="showTips"
      >
        <image
          :src="item.thumb"
          mode="widthFix"
        ></image>
      </view>
    </view>
    <!-- /推荐 -->

    <!-- 月份 -->
    <view class="months_wrap">
      <view
        class="months_title"
        v-if="recommends.length!==0"
      >
        <view class="months_title_info">
          <view class="months_info"><text>{{monthes.DD}}</text> /{{monthes.MM}}月</view>
          <view class="months_text">{{monthes.title}}</view>
        </view>
        <view class="months_title_more">更多></view>
      </view>
      <view class="months_content">
        <view
          class="months_item"
          v-for="(item,index) in monthes.items"
          :key="item.id"
        >
          <go-detail
            :list="monthes.items"
            :index="index"
          >
            <image
              :src="item.thumb+item.rule.replace('$<Height>','360')"
              mode="aspectFill"
            ></image>
          </go-detail>
        </view>
      </view>
    </view>

    <!-- /月份 -->
    <!-- 热门 -->
    <view class="hot">
      <view class="hot_title">热门</view>
      <view class="hot_content">
        <view
          class="hot_item"
          v-for="(item,index) in hots"
          :key="item.id"
        >
          <go-detail
            :list="hots"
            :index="index"
          >
            <image
              mode="widthFix"
              :src="item.thumb"
            ></image>
          </go-detail>
        </view>
      </view>
    </view>
    <!-- /热门 -->
  </scroll-view>
</template>

<script>
import moment from 'moment'
// import { goDetail } from '@components/goDetail'
import goDetail from '../../../components/goDetail'
export default {
  components: {
    goDetail
  },
  data () {
    return {
      // 推荐
      recommends: [],
      // 月份
      monthes: {},
      // 时间戳对应的日期
      stime: '',
      //热门
      hots: [],
      queryInfo: {
        // 要获取多少条数据
        limit: 30,
        // 关键字
        order: 'hot',
        // 要跳过几条
        skip: 0
      },
      // 是否还有下一页
      hasMore: true
    }
  },
  mounted () {
    uni.setNavigationBarTitle({ title: '推荐' })
    this.getList()
  },
  methods: {
    // 获取首页数据
    getList () {
      this.$request({
        url: '/image/v3/homepage/vertical',
        data: this.queryInfo
      }).then(res => {
        console.log(res);
        // 推荐
        this.recommends = res.homepage[1].items
        console.log(this.recommends);
        //月份
        this.monthes = res.homepage[2]
        // 将时间戳转化为具体
        this.monthes.MM = moment(this.monthes.stime).format('MM')
        this.monthes.DD = moment(this.monthes.stime).format('DD')
        // 如果返回数据不足，就说明没有数据了
        if (res.vertical.length !== this.queryInfo.limit) {
          this.hasMore = false
          uni.showToast({
            title: '没有更多数据了',
            icon: 'none'
          });

        }
        this.hots = [...this.hots, ...res.vertical];


      })
    },
    //滚动条触底事件
    handleToLower () {
      if (!this.hasMore) {
        return uni.showToast({
          title: '没有更多数据了',
          icon: 'none'
        });
      }
      this.queryInfo.skip += this.queryInfo.limit
      this.getList()
    },
    // 提示接口出现问题
    showTips () {
      uni.showToast({ title: '接口已挂，万分抱歉', icon: 'none' })
    }
  }
}
</script>

<style lang="scss" scope>
.recommend_view {
  //要给scroll_view一个高度=屏幕的高度-头部标题的高度
  height: calc(100vh - 40px);
  // height: 800px;

  .recommend_wrap {
    display: flex;
    flex-wrap: wrap;
    .recommend_item {
      width: 50%;
      border: 5rpx solid #ffffff;
    }
  }
  .months_wrap {
    .months_title {
      display: flex;
      justify-content: space-between;
      font-weight: 700;
      padding: 20rpx;
      font-size: 30rpx;
      .months_title_info {
        display: flex;
        .months_info {
          color: $color;
          margin-right: 20rpx;
          text {
            font-size: 36rpx;
          }
        }
        .months_text {
        }
      }
      .months_title_more {
        color: $color;
      }
    }
    .months_content {
      display: flex;
      flex-wrap: wrap;
      .months_item {
        width: 33.33%;
        border: 5rpx solid #ffffff;
      }
    }
  }
  .hot {
    .hot_title {
      margin: 20rpx;
      padding-left: 10rpx;
      border-left: 15rpx solid $color;
      font-size: 30rpx;
    }

    .hot_content {
      display: flex;
      flex-wrap: wrap;
      .hot_item {
        width: 33.33%;
        border: 5rpx solid #ffffff;
      }
    }
  }
}
</style>